<template>
  <a-row type="flex" style="flex-flow: inherit">
    <a-col :flex="toggle ? '260px' : '30px'" style="margin-right: 12px; background-color: #fff">
      <depart-tree :departType="2" :rootOpened="true" :multi="false" @ok="getTreeData" @toggleBool="toggleBool" />
      <!-- <groups-tree @tree="getTreeData" @selectedKeys="getSelectedKeys" /> -->
    </a-col>
    <a-col flex="auto">
      <a-card class="topBox" :bordered="false" style="margin-bottom: 10px">
        <!-- 查询区域 -->
        <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
          <a-row>
            <a-col :span="7">
              <a-form-model-item label="方案名称">
                <a-input v-model="form.schemeName" placeholder="请输入" />
              </a-form-model-item>
            </a-col>
            <a-col :span="7">
              <a-form-model-item label="适用范围">
                <a-select v-model="form.scope" placeholder="请选择" style="width: 100%" allowClear>
                  <a-select-option v-for="(item, key) in rangeOpts" :key="key" :value="item.value"
                    >{{ item.title }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="7">
              <a-form-model-item label="是否有效">
                <a-select v-model="form.status" placeholder="请选择" style="width: 100%" allowClear>
                  <a-select-option v-for="(item, key) in isValidOpts" :key="key" :value="item.value"
                    >{{ item.title }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="4">
              <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
                <a-button type="primary" icon="search" @click="onQuery"> 查询 </a-button>
                <a-button style="margin-left: 10px" icon="reload" @click="onResetForm"> 重置 </a-button>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-card>
      <a-card :bordered="false">
        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <a-button type="primary" icon="plus" @click="onAdd('1')">新增</a-button>
          <a-button icon="copy" @click="onCopy">复制</a-button>
          <a-button icon="edit" @click="onAdd('2')">编辑</a-button>
          <a-button type="primary" icon="delete" class="ant-btn-danger" @click="onDel">删除</a-button>
        </div>
        <!-- 表格展示 -->
        <div class="table-page-content">
          <z-table
            ref="table"
            rowKey="id"
            :showAlert="false"
            :showSelection="true"
            :loading="loading"
            :columns="columns"
            :dataSource="pageData"
            @selectedRow="onSelectedRow"
            @change="onTableChange"
          >
            <!--操作-->
            <template slot="action" slot-scope="text, record">
              <a-button @click="onDetail('3', record)" type="link" style="padding: 0">详情</a-button>
            </template>
          </z-table>
        </div>
      </a-card>
    </a-col>
    <AddPlan
      ref="addPlan"
      v-if="visible"
      :visible.sync="visible"
      :showType="showType"
      :checkRow="checkRow"
      :orgCode="orgCode"
      @ok="onQuery"
    />
  </a-row>
</template>

<script>
import DepartTree from '@/views/sjsk/modules/departTree'
import AddPlan from './components/addPlan'

import Api from '@/api/sjsk/performanceService'
import { getDictItemsFromCache } from '@/api/api'
import moment from 'moment'

export default {
  components: {
    DepartTree,
    AddPlan,
  },
  data() {
    return {
      moment,
      labelCol: { span: 6 },
      wrapperCol: { span: 17 },
      loading: false,
      isDisabled: true,
      reloading: false,
      checkList: [],
      form: {},
      rangeOpts: getDictItemsFromCache('appScope'),
      isValidOpts: getDictItemsFromCache('yn'),
      treeDatas: [],
      toggle: true,
      orgCode: null,
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}`,
        },
        {
          title: '方案名称',
          dataIndex: 'schemeName',
          align: 'center',
          customRender: (text) => {
            return <j-ellipsis value={text} length={10} />
          },
        },
        {
          title: '适用范围',
          dataIndex: 'scope',
          align: 'center',
          customRender: (text) => {
            return <j-ellipsis value={this.$filterDictTextByCache('appScope', text)} />
          },
        },
        {
          title: '方案说明',
          dataIndex: 'remark',
          align: 'center',
          customRender: (text) => {
            return <j-ellipsis value={text} length={10} />
          },
        },
        {
          title: '是否有效',
          dataIndex: 'status',
          align: 'center',
          customRender: (text) => {
            return <j-ellipsis value={this.$filterDictTextByCache('yn', text)} />
          },
        },
        {
          title: '创建人',
          dataIndex: 'createBy',
          align: 'center',
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          align: 'center',
        },
        {
          title: '操作',
          width: 160,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: {},
      treeData: [],
      showType: '1',
      checkRow: {},
      visible: false,
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.onQuery()
  },

  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },

    onResetForm() {
      this.form = {}
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.refreshTable()
    },

    // 新增/编辑
    onAdd(_type) {
      this.checkRow = {}
      if (_type === '2') {
        if (!this.checkList.length) {
          this.$message.warn('请选择方案')
          return
        } else if (this.checkList.length > 1) {
          this.$message.warn('只能选择一条方案进行编辑')
          return
        }
        this.checkRow = this.checkList[0]
      }
      this.showType = _type
      this.visible = true
    },

    // 复制
    onCopy() {
      if (!this.checkList.length) {
        this.$message.warn('请选择方案')
        return
      } else if (this.checkList.length > 1) {
        this.$message.warn('只能选择一条方案进行复制')
        return
      }
      Api.copyScheme(this.checkList[0].id).then((res) => {
        if (res.success) {
          this.$message.success('复制成功')
          this.refreshTable()
        } else {
          this.$message.error(res.message)
        }
      })
    },

    // 删除
    onDel() {
      if (!this.checkList.length) {
        this.$message.warn('请选择方案')
        return
      }
      const that = this
      const ids = this.checkList.map((el) => el.id)
      this.$confirm({
        title: `确定是否删除?`,
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          Api.deleteScheme({ ids }).then((res) => {
            if (res.success) {
              that.$message.success('删除成功')
              that.refreshTable()
            } else {
              that.$message.error(res.message)
            }
          })
        },
      })
    },

    // 详情
    onDetail(_type, _row) {
      this.showType = _type
      this.checkRow = _row
      this.visible = true
    },

    onSelectedRow(keys) {
      this.checkList = keys
      this.isDisabled = keys.length <= 0
    },

    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },

    refreshTable() {
      let form = Object.assign({}, this.form, this.pageFilter)
      if (this.treeDatas.length) {
        form.orgCode = this.treeDatas[0].orgCode
        this.orgCode = form.orgCode
      }
      this.loading = true
      Api.getListScheme(form)
        .then((res) => {
          if (res.success) {
            this.pageData = res.result ? res.result : {}
            this.$refs.table.onClearRowKeys()
          } else {
            this.$message.error(res.message)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },

    getSelectedKeys(keys) {
      console.log(keys)
      this.$set(this.form, 'labelId', keys.join(','))
      this.onQuery()
    },

    /** 重新加载组件 */
    reload() {
      this.reloading = true
      this.$nextTick(() => (this.reloading = false))
    },

    getTreeData(datas) {
      console.log('getTreeData--', datas)
      this.treeDatas = datas
      this.onQuery()
    },

    toggleBool(bool) {
      console.log(bool)
      this.toggle = bool
    },
  },
}
</script>
<style lang="less" scoped>
.topBox /deep/.ant-row {
  margin-bottom: 0;
}

/deep/.ant-col-7 {
  width: 28%;
}

/deep/.ant-col-4 {
  width: 16%;
}
</style>
